<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('场所时段对比')" />
    <th:block th:include="include :: select2-css" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 ">
            <form id="do_query_form" class="form-horizontal">
                <div class="row">
                    <div class="col-sm-8">
                        <div class="form-group">
                            <label class="col-sm-2 control-label is-required">选择区域：</label>
                            <div class="col-sm-8">
                                <div class="input-group">
                                    <select id="deptIds" class="form-control select2-multiple" multiple required>
                                        <option th:each="dept : ${depts}" th:value="${dept.deptId}" th:text="${dept.deptName}"></option>
                                    </select>
                                    <div class="input-group-btn">
                                        <button data-toggle="dropdown"
                                                class="btn btn-white dropdown-toggle" type="button" onclick="selectAllOptions('#deptIds')">全选
                                        </button>
                                        <button data-toggle="dropdown"
                                                class="btn btn-white dropdown-toggle" type="button" onclick="clearAllOptions('#deptIds')">清空
                                        </button>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-8">
                        <div class="form-group">
                            <label class="col-sm-2 control-label is-required">时段选择：</label>
                            <div class="col-sm-4">
                                <div class="input-daterange input-group">
                                    <input type="text" class="input-sm form-control" id="startTime" name="startTime" readonly placeholder="yyyy-MM-dd" th:value="${startTime}"/>
                                    <span class="input-group-addon">到</span>
                                    <input type="text" class="input-sm form-control" id="endTime" name="endTime" readonly placeholder="yyyy-MM-dd"  th:value="${endTime}"/>
                                </div>
                            </div>
                            <button type="button" class="btn btn-sm btn-primary" onclick="do_query()">确定</button>&nbsp;
                        </div>

                    </div>
                </div>

            </form>
        </div>

        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>客流趋势 <small id="klzsTitle"></small></h5>

                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-bar-chart" style="height: 420px"></div>
                </div>
            </div>
        </div>


        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>数据详情</h5>

                </div>
                <div class="ibox-content">
                    <table
                            id="table"
                            data-toolbar="#toolbar"
                            data-search="true"
                            data-show-refresh="true"
                            data-show-toggle="true"
                            data-show-columns="true"
                            data-show-export="true"
                            data-show-print="true"
                            data-minimum-count-columns="2"
                            data-show-pagination-switch="true"
                            data-pagination="true"
                            data-id-field="id"
                            data-page-list="[10, 25, 50, 100, ALL]"
                            data-show-footer="false"
                            data-side-pagination="client">
                    </table>
                </div>
            </div>
        </div>


    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<th:block th:include="include :: bootstrap-table-export-js" />
<th:block th:include="include :: bootstrap-table-print-js" />
<th:block th:include="include :: select2-js" />
<th:block th:include="include :: datetimepicker-js" />
<script th:inline="javascript">

    var barChart = echarts.init(document.getElementById("echarts-bar-chart"), 'light');

    $(function() {

        $("#startTime").datetimepicker({
            format: 'yyyy-mm-dd',
            minView: "month",
            todayBtn:  true,
            autoclose: true,
            endDate : new Date(),
        }).on('changeDate', function(event) {
            event.preventDefault();
            event.stopPropagation();
            var startTime = event.date;
            $('#endTime').datetimepicker('setStartDate', startTime);
        });

        $("#endTime").datetimepicker({
            format: 'yyyy-mm-dd',
            minView: "month",
            todayBtn:  true,
            autoclose: true,
            endDate : new Date(),
        }).on('changeDate', function(event) {
            event.preventDefault();
            event.stopPropagation();
            var endTime = event.date;
            $("#startTime").datetimepicker('setEndDate', endTime);
        });


        var options = {
            sortName: "startTime",
            modalName: "数据详情",
            columns: [{
                field: 'deptName3',
                sortable: true,
                title: '位置'
            },{
                field: 'startTime',
                sortable: true,
                title: '时间'
            },{
                field: 'passNum',
                title: '经过',
                sortable: true
            },
                {
                    field: 'inNum',
                    title: '进入',
                    sortable: true
                },
                {
                    field: 'outNum',
                    title: '离开',
                    sortable: true
                },
                {
                    field: 'repNum',
                    title: '重复',
                    sortable: true
                },
                {
                    field: 'manNum',
                    title: '男性',
                    sortable: true
                },
                {
                    field: 'womanNum',
                    title: '女性',
                    sortable: true
                },
                {
                    field: 'unknownSexNum',
                    title: '未知性别',
                    sortable: true
                },
                {
                    field: 'childNum',
                    title: '儿童',
                    sortable: true
                },
                {
                    field: 'juvenileNum',
                    title: '少年',
                    sortable: true
                },
                {
                    field: 'teenagerNum',
                    title: '青少年',
                    sortable: true
                },
                {
                    field: 'youthNum',
                    title: '青年',
                    sortable: true
                },
                {
                    field: 'adultNum',
                    title: '壮年',
                    sortable: true
                },
                {
                    field: 'middleNum',
                    title: '中年',
                    sortable: true
                },
                {
                    field: 'elderlyNum',
                    title: '中老年',
                    sortable: true
                },
                {
                    field: 'seniorNum',
                    title: '老年',
                    sortable: true
                },
                {
                    field: 'unknownAgeNum',
                    title: '未知年龄',
                    sortable: true
                }]
        };
        $('#table').bootstrapTable(options);
    });

    function do_query() {
        if(!$("#do_query_form").validate().form()){return};
        var deptIds = $.form.selectSelects("deptIds");
        var startTime = $("input[name='startTime']").val();
        var endTime = $("input[name='endTime']").val();
        var dateFormat = "%Y-%m-%d";
        $.ajax({
            cache : true,
            type : "POST",
            url : ctx + "sts/data/detail/deptStatistic",
            data : {
                "deptIdAttr": "dept_id3",
                "deptNameAttr": "dept_name3",
                "deptIds": deptIds,
                "startTime": startTime,
                "endTime": endTime,
                "dateFormat": dateFormat
            },
            async : false,
            error : function(request) {
                $.modal.alertError("系统错误");
            },
            success : function(data) {
                for (var i = 0; i < data.length; i++) {
                    var it = data[i];
                    it.startTime = startTime + " ~ " + endTime;

                }
                $('#table').bootstrapTable('load',data);
                setBarChart(data);
            }
        });
    }

    function setBarChart(data) {
        var deptData = $("#deptIds").select2("data");
        var deptNames = [];
        for(var i = 0; i < deptData.length; i++){
            if(deptData[i].selected){
                deptNames.push(deptData[i].text);
            }
        }
        var startTime = $("input[name='startTime']").val();
        var endTime = $("input[name='endTime']").val();
        var dateRange = [startTime + " ~ " + endTime];

        var series = [];
        var maxInDatas = Array(deptNames.length).fill(0);
        var maxInDataDates = Array(deptNames.length).fill(0);
        for(var i = 0; i < deptNames.length; i++){
            var deptName = deptNames[i];
            var deptData = data.filter(it=>it.deptName3 === deptName);
            var inData = Array(dateRange.length).fill(0);
            for (var j = 0; j < deptData.length; j++) {
                var it = deptData[j];
                var index = dateRange.indexOf(it.startTime);
                inData[index] = it.inNum;

            }
            var maxInData = Math.max(...inData);
            var maxInIndex = inData.indexOf(maxInData);
            maxInDataDates[i] = dateRange[maxInIndex];
            maxInDatas[i] = maxInData;
            var serie = {
                barMaxWidth: 50,
                name: deptName,
                type: 'bar',
                data: inData
            }
            series.push(serie);
        }

        var maxInData = Math.max(...maxInDatas);
        var maxInIndex = maxInDatas.indexOf(maxInData);
        var klzsTitle = "其中 <span style='color: red;font-size: 15px'>"+deptNames[maxInIndex]+"</span>区域在<span style='color: red;font-size: 15px'>"+maxInDataDates[maxInIndex]+"</span>期间人次最多，达到<span style='color: red;font-size: 15px'>"+maxInData+"</span>人";
        $("#klzsTitle").html(klzsTitle);
        var option = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: deptNames
            },
            grid: {
                left: 50,
                right: 10,
                bottom: 30
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: dateRange
                }
            ],
            yAxis: [
                {
                    name: '人次',
                    nameLocation: 'center',
                    nameRotate: 90,
                    nameTextStyle: {
                        color: '#666',
                        verticalAlign: 'middle',
                        align: 'right'
                    },
                    nameGap: 30
                }
            ],
            series: series
        };
        barChart.clear();
        barChart.setOption(option);

        window.onresize = barChart.resize;
    }

</script>
</body>
</html>